<template>
  <div class="personalizedmv-wrapper">
    <div class="title">
      <h3>推荐MV</h3>
      <span @click="gotoSearch()">更多...</span>
    </div>
    <div class="body">
      <ul class="item">
        <li class="list" v-for="data in MVdata" :key="data.id">
          <div class="img" @click="gotoMV_id(data.id)">
            <img :src="data.picUrl" alt />
            <span>
              <div class="play-count">
                <i class="el-icon-video-camera"></i>
                <span>{{data.playCount}}</span>
              </div>
              <span class="copywriter">{{data.copywriter}}</span>
            </span>
          </div>
          <div class="text">
            <p class="time">
              <span>{{data.name}}</span>
              <span>时长：{{data.duration | toStringMusicTime}}</span>
            </p>
            <p class="name">
              <span v-for="ar in data.artists" :key="ar.id">{{ar.name}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { musicApi } from "@/public/uri.js";
export default {
  name: "PersonalizedMV",
  mounted() {
    this.getMVData();
  },
  data() {
    return {
      MVdata: []
    };
  },
  methods: {
      gotoMV_id(id) {
          this.$router.push('mv/' + id)
      },
    gotoSearch() {
      this.$router.push({
        path: "search",
        query: { search: "推荐MV" }
      });
    },
    getMVData() {
      this.$axios
        .get(`${musicApi}/personalized/mv`)
        .then(res => {
          if (res.data.code === 200) {
            this.MVdata = res.data.result;
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    }
  }
};
</script>

<style lang="sass" scoped>
@import "@/assets/default.sass"
.personalizedmv-wrapper
  width: 100%
  margin: 20px 0 70px
  overflow: hidden
  .title
    width: 100%
    height: 40px
    line-height: 40px
    border-bottom: 1px solid rgba(0,0,0,.1)
    overflow: hidden
    @include flex(space-between,center)
    >h3
      color: #eb2001  
    >span
      cursor: pointer
  .body
    margin-top: 20px
    .item
      width: 100%
      overflow: hidden
      @include flex(space-between,center)
      .list 
        flex: 0 0 24%
        overflow: hidden
        .img
          width: 100%
          height: 200px
          position: relative
          cursor: pointer
          >img
            width: 100%
            height: 100%
          .play-count
            position: absolute
            top: 0
            right: 0
            color: #fff
            padding: 5px
          .copywriter
            position: absolute
            width: 100%
            height: 30px
            line-height: 30px
            background-color: rgba(0,0,0,.3)
            color: #fff
            left: 0
            bottom: 0
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
        .text
          width: 100%
          height: 80px
          .time
            width: 100%
            height: 40px
            line-height: 40px
            @include flex(space-between,center)
            >span:first-child
              color: #000
              font-size: 16px
              flex: 1
              padding-right: 10px
              overflow: hidden
              text-overflow: ellipsis
              white-space: nowrap
            >span:last-child
              margin-right: 10px
          .name
            width: 100%
            >span
              &:after
                content: " | "
              &:last-child
                &:after
                  content: ""
</style>